<template>
    <div class="skeleton-loader" :class="type">
      <div v-if="type === 'article'" class="skeleton-article">
        <div class="skeleton-cover"></div>
        <div class="skeleton-content">
          <div class="skeleton-title"></div>
          <div class="skeleton-text"></div>
          <div class="skeleton-text"></div>
          <div class="skeleton-meta">
            <div class="skeleton-avatar"></div>
            <div class="skeleton-info"></div>
          </div>
        </div>
      </div>
  
      <div v-else-if="type === 'list'" class="skeleton-list">
        <div class="skeleton-item" v-for="n in count" :key="n">
          <div class="skeleton-title"></div>
          <div class="skeleton-text"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SkeletonLoader',
    
    props: {
      type: {
        type: String,
        default: 'article'
      },
      count: {
        type: Number,
        default: 1
      }
    }
  }
  </script>
  
  <style>
  .skeleton-loader {
    width: 100%;
  }
  
  .skeleton-article {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .skeleton-cover {
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 400% 100%;
    animation: shimmer 1.5s infinite;
  }
  
  .skeleton-content {
    padding: 16px;
  }
  
  .skeleton-title {
    height: 24px;
    width: 80%;
    background: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 16px;
  }
  
  .skeleton-text {
    height: 16px;
    background: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 8px;
  }
  
  .skeleton-text:last-child {
    width: 60%;
  }
  
  .skeleton-meta {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
  }
  
  .skeleton-info {
    height: 16px;
    width: 100px;
    background: #f0f0f0;
    border-radius: 4px;
  }
  
  .skeleton-list .skeleton-item {
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .skeleton-list .skeleton-title {
    width: 60%;
    margin-bottom: 12px;
  }
  
  .skeleton-list .skeleton-text {
    width: 100%;
  }
  
  @keyframes shimmer {
    0% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0 50%;
    }
  }
  </style>